<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-button type="primary" size="small" icon="el-icon-edit" @click="onAdd">添加</el-button>
    </div>
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="list"
        :height="'calc(100vh - 300px)'"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >

        <el-table-column
          align="center"
          label="id"
        >

          <template slot-scope="{ row }">
            {{ row.id }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="字段名"
        >

          <template slot-scope="{ row }">
            {{ row.fieldName }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="字段描述"
        >

          <template slot-scope="{ row }">
            {{ row.desc }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="字段依赖"
        >
          <template slot-scope="{ row }">
            {{ row.relyOn }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="条件筛选"
        >

          <template slot-scope="{ row }">
            {{ row.conditions }}
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="计算公式"
        >

          <template slot-scope="{ row }">
            {{ row.formula }}
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="操作"
          fixed="right"
          width="160"
        >
          <template slot-scope="{row}">
            <el-button
              type="primary"
              size="mini"
              @click="onUpdate(row)"
            >编辑
            </el-button>
            <el-button
              type="danger"
              size="mini"
              @click="onDelete(row)"
            >删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>
      <AtomFieldEditor
        :visible.sync="editVisible"
        :value="tempAtomField"
        @success="addOrUpdateField"
      ></AtomFieldEditor>
    </div>
  </div>
</template>

<script>
import {
  addAtomField,
  atomFieldList, deleteAtomField, updateAtomField,
  preUpdateAtomField
} from '@/api/bx';
import AtomFieldEditor from './components/atomFieldEditor';

export default {
  name: 'AtomFieldList',
  components: { AtomFieldEditor },
  data() {
    return {
      tempAtomField: {},
      editVisible: false,
      list: [],
      listLoading: true
    }
  },
  created() {
    this.doSearch()
  },
  methods: {
    doSearch() {
      atomFieldList().then(resp => {
        this.list = resp.data.list
        this.listLoading = false
      })
    },

    onAdd() {
      this.tempAtomField = {
        fieldName: '',
        desc: '',
        relyOn: null,
        formula: '',
        conditions: null,
        dateOffset: 0,
        addDefaultDisplayField: true
      }
      this.editVisible = true
    },

    onUpdate(row) {
      this.tempAtomField = Object.assign({}, row)
      this.editVisible = true
    },

    onDelete(row) {
      deleteAtomField(row.id).then(resp => {
        this.doSearch()
      })
    },

    addOrUpdateField(field) {
      this.editVisible = false
      if (field.id) {
        preUpdateAtomField(field).then(resp => {
          if (resp.data.msg) {
            this.$confirm(resp.data.msg + '是否继续?').then(() => {
              updateAtomField(field).then(resp => {
                this.doSearch()
              })
            })
          } else {
            updateAtomField(field).then(resp => {
              this.doSearch()
            })
          }
        })
      } else {
        addAtomField(field).then(resp => {
          this.doSearch()
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
